What is a Block? Blocks are independent, reusable and usually bigger components of a webpage. They can have modifiers and contain elements. We can count bigger parts in a webpage like header , nav, section, form, article, footer as block examples.

Elements Elements are children of blocks. An element can only have 1 parent Block, and can’t be used independently outside of that block.

Modifiers Modifiers represent different states or styles of classes. They can be used both for blocks or elements.

bem-components is an open-source library that provides a set of ready-made visual components (blocks) for creating web interfaces.

BEM is a highly useful, powerful, and simple naming convention that makes your front-end code easier to read and understand, easier to work with, easier to scale, more robust and explicit, and a lot more strict.

The BEM approach ensures that everyone who participates in the development of a website works with a single codebase and speaks the same language. Using BEM’s proper naming convention will better prepare you for design changes made to your website.

---